<template>
  <div class="mint-nft">
    <h1>NFT铸造</h1>
    <el-alert
      title="铸造NFT需要消耗100单位平台余额"
      type="info"
      :closable="false"
      style="margin-bottom: 20px"
    >
    </el-alert>
    <el-card class="mint-card">
      <el-form :model="form" label-width="120px">
        <el-form-item label="NFT合约地址">
          <el-input
            v-model="form.nftContractAddress"
            placeholder="请输入NFT合约地址"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="mintNFT" :loading="loading"
            >铸造NFT</el-button
          >
        </el-form-item>
      </el-form>

      <div v-if="result" class="result-box">
        <h3>铸造结果</h3>
        <p><strong>交易哈希:</strong> {{ result.transaction_hash }}</p>
        <p><strong>Token ID:</strong> {{ result.token_id }}</p>
        <el-link
          type="primary"
          :href="`https://etherscan.io/tx/${result.transaction_hash}`"
          target="_blank"
          >在Etherscan上查看</el-link
        >
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import { Contracts_Address } from "../const/Contracts.js";

export default {
  name: "MintNFT",
  data() {
    return {
      form: {
        nftContractAddress: Contracts_Address.TestNFT,
      },
      loading: false,
      result: null,
    };
  },
  methods: {
    async mintNFT() {
      if (!this.form.nftContractAddress) {
        this.$message.error("请输入NFT合约地址");
        return;
      }

      this.loading = true;
      try {
        const response = await axios.post("/transaction/mint-nft", {
          nft_contract_address: this.form.nftContractAddress,
        });

        this.result = response.data;
        this.$message.success("NFT铸造成功！");
      } catch (error) {
        this.$message.error(error.response?.data?.message || "铸造NFT失败");
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
.mint-nft {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.mint-card {
  margin-top: 20px;
}

.result-box {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}
</style>
